/*css reset*/

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;}

html,body,p{ padding: 0; margin: 0; font-family: "Noto Sans CJK SC";}

ol, ul {list-style: none; padding: 0; margin: 0;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; }

table {border-collapse: collapse; border-spacing: 0;}

th,td { vertical-align: middle;padding: 0;}

a{text-decoration:none;	outline: none;hlbr:expression(this.onFocus=this.blur());}

input, select {vertical-align: middle;padding: 0;border: 0 none;}

img, iframe {border: none; text-decoration:none;}

img{vertical-align: top;}

strong {font-weight: bold;}

h1,h2,h3,h4,h5,h6{padding: 0; margin: 0;}

:focus {outline: 0;}

::-webkit-input-placeholder { /* WebKit browsers */

    color:    #999;

}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

   color:    #999;

   opacity:  1;

}

::-moz-placeholder { /* Mozilla Firefox 19+ */

   color:    #999;

   opacity:  1;

}

:-ms-input-placeholder { /* Internet Explorer 10+ */

   color:    #999;

}



/*css common*/

.f-left {float: left;}

.f-right {float: right;}

.clearfix:after{content: "";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;font-size:0;}

.clearfix{*zoom:1;}

.nodisplay{display: none;}

html{margin: 0 auto;max-width: 1920px;}

html, body{height: 100%;}

.inner{width: 81.25%;margin: 0 auto;}

.mobile{

	display: none!important;

}

.web{

	display: block!important;

}

/*sidenav*/

#sidenav{

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  z-index: -1;

  overflow: hidden;

  transition: all 0.5s;

  -webkit-transition: all 0.5s;

  background-image: url(img/side_bg.jpg);

  background-size: 100% 100%;

  opacity: 0;

}

#sidenav.active{

  z-index: 10;

  opacity: 1;

}

#sidenav .head{

  position: absolute;

  left: 50px;

  top: 50px;

  right: 50px;

  z-index: 1;

}

#sidenav .head .logo{

  float: left;

  width: 600px;

  height: 46px;

  background-repeat: no-repeat;

  background-size: 100% auto;

  background-image: url(img/sidenav_logo.png);

}

#sidenav .head .close{

  float: right;

  width: 40px;

  height: 40px;

  background-repeat: no-repeat;

  background-size: 100% auto;

  background-image: url(img/sidenav_close.png);

  cursor: pointer;

  position: relative;

}

#sidenav .head .close p{

  position: absolute;

  left: 0;

  top: 100%;

  margin-top: 10px;

  width: 100%;

  text-align: center;

  font-size: 14px;

  color: #777;

  font-weight: lighter;

}

#sidenav ul{

  font-size: 0;

  height: 100%;

}

#sidenav ul li{

  display: inline-block;

  vertical-align: top;

  width: 14.28%;

  text-align: center;

  height: 100%;

  border-right: 1px solid #ebebeb;

  padding-top: 3.5%;

  transition-property: opacity,top,background;

  transition-duration: 0.5s,0.5s,0.5s;

  -webkit-transition-property: opacity,top,background;

  -webkit-transition-duration: 0.5s,0.5s,0.5s;

  position: relative;

  opacity: 0;

  top: -40px;

  background: #fff;

}

#sidenav.active ul li{

  top: 0;

  opacity: 1;

}

#sidenav.active ul li:nth-child(1){

  transition-delay: 0.4s,0.4s,0s;

  -webkit-transition-delay: 0.4s,0.4s,0s;

}

#sidenav.active ul li:nth-child(2){

  transition-delay: 0.6s,0.6s,0s;

  -webkit-transition-delay: 0.6s,0.6s,0s;

}

#sidenav.active ul li:nth-child(3){

  transition-delay: 0.8s,0.8s,0s;

  -webkit-transition-delay: 0.8s,0.8s,0s;

}

#sidenav.active ul li:nth-child(4){

  transition-delay: 1s,1s,0s;

  -webkit-transition-delay: 1s,1s,0s;

}

#sidenav.active ul li:nth-child(5){

  transition-delay: 1.2s,1.2s,0s;

  -webkit-transition-delay: 1.2s,1.2s,0s;

}

#sidenav.active ul li:nth-child(6){

  transition-delay: 1.4s,1.4s,0s;

  -webkit-transition-delay: 1.4s,1.4s,0s;

}

#sidenav.active ul li:nth-child(7){

  transition-delay: 1.6s,1.6s,0s;

  -webkit-transition-delay: 1.6s,1.6s,0s;

}

#sidenav ul li:hover{

  background: transparent;

}

#sidenav ul li:last-child{

  border-right: 0 none;

}

#sidenav ul li .line{

  width: 1px;

  height: 50px;

  background-color: #333333;

  opacity: 0;

  display: block;

  margin: 0 auto 90px;

  transition: all 0.5s;

  -webkit-transition: all 0.5s;

}

#sidenav ul li:hover .line{

  margin: 0 auto 35px;

  opacity: 1;

  background-color: #fff;

}

#sidenav ul li h3{

  font-size: 82px;

  color: #f2f2f2;

  font-weight: lighter;

  font-family: ""Noto Sans SC"";

  margin-bottom: 60px;

  transition: all 0.5s;

  -webkit-transition: all 0.5s;

}

#sidenav ul li:hover h3{

  margin-bottom: 48px;

  color: #fff;

}

#sidenav ul li h4{

  font-size: 12px;

  color: #666666;

  font-weight: normal;

  font-family: '"Noto Sans SC"';

  margin-bottom: 30px;

  display: none;

  transition: all 0.5s;

  -webkit-transition: all 0.5s;

}

#sidenav ul li:hover h4{

  display: block;

  color: #fff;

}

#sidenav ul li a.big{

  font-size: 24px;

  color: #333;

  display: block;

  margin-bottom: 46px;

  transition: all 0.5s;

  -webkit-transition: all 0.5s;

}

#sidenav ul li:hover a.big{

  color: #fff;

}

#sidenav ul li .small a{

  font-size: 14px;

  color: #666;

  font-weight: lighter;

  margin-bottom: 12px;

  display: block;

  transition: all 0.5s;

  -webkit-transition: all 0.5s;

}

#sidenav ul li:hover a{

  color: #fff;

}

#sidenav ul li a.big.active,#sidenav ul li a.big:hover,#sidenav ul li .small a.active,#sidenav ul li .small a:hover{

  color: #e60012;

}

/*footer*/

.footer{

  font-size: 12px;

  color: #999;

  font-weight: lighter;

  font-family: '"Noto Sans SC"';

  position: absolute;

  left: 50px;

  bottom: 50px;

  right: 50px;

  z-index: 9;

}

.footer .left{

  float: left;

}

.footer .left .web{

  display: inline-block!important;

}

.footer .left a{

  font-size: 12px;

  color: #999;

  position: relative;

}

.footer .left a img{

  background-repeat: no-repeat;

  background-image: url(img/service_qr_bg.png);

  width: 94px;

  height: 102px;

  padding: 8px 8px 16px;

  position: absolute;

  left: 50%;

  margin-left: -47px;

  top: -110px;

  display: none;

}

.footer .left a:hover{

  color: #666;

}

.footer .left a:hover img{

  display: block;

}

.footer .right{

  float: right;

}

.footer .right a{

  display: inline-block;

  vertical-align: middle;

  background-repeat: no-repeat;

  background-size: 100% auto;

  background-position: center top;

  margin-right: 15px;

}

.footer.active .right a{

  background-position: center bottom;

}

.footer .right .icon1{

  width: 16px;

  height: 12px;

  background-image: url(img/footer_icon1.png);

}

.footer .right .icon2{

  width: 16px;

  height: 15px;

  background-image: url(img/footer_icon2.png);

}

@media only screen and (max-width:1320px){

	

}

@media only screen and (max-width:1270px){

	

}

@media only screen and (max-width:1200px){

}

@media only screen and (max-width:1024px){

	html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;font-size: 16px;}

	body{

		 font-size: 42.5%;

	}

	.mobile{

		display: block!important;

	}

	.web{

		display: none!important;

	}

  .inner{width: 72%;}

  /*sidenav*/

  #sidenav .head{

    left: 0.9375rem;

    top: 0.9375rem;

    right: 0.9375rem;

  }

  #sidenav .head .logo{

    display: none;

  }

  #sidenav .head .close{

    width: 1.25rem;

    height: 1.25rem;

  }

  #sidenav .head .close p{

    margin-top: 0.1875rem;

    font-size: 0.5625rem;

    white-space: nowrap;

  }

  #sidenav ul{

    padding-top: 3.125rem;

    background-color: #fff;

    overflow: auto;

  }

  #sidenav ul li{

    width: 100%;

    text-align: left;

    height: auto;

    border-right: 0 none;

    border-bottom: 1px solid #ebebeb;

    padding-top: 1rem;

    padding-bottom: 1rem;

    padding-left: 2.5rem;

    top: -1.25rem;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    -webkit-display: flex;

    -webkit-align-items: flex-start;

    -webkit-justify-content: flex-start;

  }

  #sidenav ul li .line{

    display: none;

  }

  #sidenav ul li .icon{

    background-repeat: no-repeat;

    background-image: url(img/sidenav_icon.png);

    background-size: 100% 100%;

    display: block;

    position: absolute;

    right: 2.125rem;

    top: 2.28125rem;

    width: 0.625rem;

    height: 0.3125rem;

  }

  #sidenav ul li.active .icon{

    transform: rotate(180deg);

    -webkit-transform: rotate(180deg);

  }

  #sidenav ul li h3{

    font-size: 2.5625rem;

    margin-bottom: 0;

    margin-right: 1.875rem;

  }

  #sidenav ul li:hover h3{

    margin-bottom: 0;

    color: #f2f2f2;

  }

  #sidenav ul li:hover h4{

    display: none;

  }

  #sidenav ul li a.big{

    font-size: 1rem;

    line-height: 2.5625rem;

    margin-bottom: 1rem;

  }

  #sidenav ul li:hover a.big{

    color: #333;

  }

  #sidenav ul li .small{

    display: none;

  }

  #sidenav ul li.active .small{

    display: block;

  }

  #sidenav ul li .small a{

    font-size: 0.75rem;

    margin-bottom: 0.75rem;

  }

  #sidenav ul li .small a:last-child{

    margin-bottom: 0;

  }

  #sidenav ul li:hover a{

    color: #666;

  }

  /*footer*/

  .footer{

    font-size: 0.5625rem;

    left: 1.25rem;

    bottom: 0.75rem;

    right: 1.25rem;

  }

  .footer .left .web{

    display: none!important;

  }

  .footer .right a{

    display: none;

  }

}

@media only screen and (max-width:767px){

	

}

@media only screen and (max-width:414px){

	

}

@media only screen and (max-width:320px){

	

}